<template>
  <div id="container" class="map-container"></div>
</template>
<script setup lang="ts">
import AMapLoader from "@amap/amap-jsapi-loader";
const props = defineProps({
  clickable: {
    type: Boolean,
    default: false,
  },
  //经度值
  lng: {
    type: Number,
  },
  //纬度值
  lat: {
    type: Number,
  },
  center: {
    type: Array,
    default: () => {
      return [115.816587, 28.637234];
    },
  },
});
let map = null;
let marker = null;
const emit = defineEmits(["click"]);

watch(
  () => props.lng,
  () => {
    if (!props.lng || !props.lat) return;
    marker && map.remove(marker);
    marker = new AMap.Marker({
      position: [props.lng, props.lat], //位置
    });
    map.add(marker); //添加到地图
    map.setCenter([props.lng, props.lat]);
  }
);
function initAMap() {
  window._AMapSecurityConfig = {
    securityJsCode: "「你申请的安全密钥」",
  };
  AMapLoader.load({
    key: import.meta.env.VITE_AMAP_KEY, // 申请好的Web端开发者Key，首次调用 load 时必填
    version: "2.0", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
    plugins: ["AMap.Scale"], //需要使用的的插件列表，如比例尺'AMap.Scale'，支持添加多个如：['...','...']
  })
    .then((AMap) => {
      map = new AMap.Map("container", {
        // 设置地图容器id
        viewMode: "3D", // 是否为3D地图模式
        zoom: 11, // 初始化地图级别
        center: props.center, // 初始化地图中心点位置
      });
      if (props.lng && props.lat) {
        marker && map.remove(marker);
        marker = new AMap.Marker({
          position: [props.lng, props.lat], //位置
        });
        map.add(marker); //添加到地图
        map.setCenter([props.lng, props.lat]);
      }
      if (props.clickable) {
        // 给地图实例绑定点击事件 onClick
        map.on("click", (e) => {
          emit("click", e);
        });
      }
    })
    .catch((e) => {
      console.log(e);
    });
}

function destroyMap() {
  map && map.destroy();
}
function clearMarker() {
  marker && map.remove(marker);
}
function clearEvents() {
  map && map.clearEvents("click");
}

onMounted(() => {
  initAMap();
});
onBeforeUnmount(() => {
  destroyMap();
  clearEvents();
});
defineExpose({
  destroyMap,
  clearEvents,
  clearMarker,
});
</script>
<style scoped lang="scss">
.map-container {
  width: 100%;
  height: 100%;
}
</style>
